<template>
  <div class="reports">
    <base-template :breadList="['数据统计', '数据报表']">
      <div id="main" style="width:700px"></div>
    </base-template>
  </div>
</template>

<script>
import BaseTemplate from '../../component/base-template.vue'
import * as echarts from 'echarts'

import {} from 'echarts/charts'
export default {
  name: 'report',
  components: {
    BaseTemplate,
  },
  data() {
    return {
      mychart: null,
      options: {
        title: {
          text: '用户来源',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3',
            },
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
      },
    }
  },
  mounted() {
    this.mychart = echarts.init(document.getElementById('main'),null,{width:960,height:460})
	this.getEchartsData()
  },
  methods:{
	  async getEchartsData(){
		  const res=await this.$store.dispatch('getRequest',{path:'reports/type/1'})
		  
		const  showChartsData=  Object.assign({},this.options,res)

		showChartsData&&this.mychart.setOption(showChartsData)
		  console.log(showChartsData);
	  }
  }

}
</script>
